<template>
	<div>
		<div>
			<top-nav bgColor="#FFFFFF" title="学校列表" btnName="主页" :rightShow="true" returnPath="上一级" @rightDo="backHome" style="z-index: 100;"></top-nav>
			<section style="height: 3rem;"></section>
		</div>
		<div>
			<mu-avatar size="70" style="position: absolute;left: 4%;top: 60px;">
				<img v-bind:src="SchoolImg">
			</mu-avatar>
			<mu-container style="margin-left:27%;width: 73%;">
				<mu-flex class="flex" justify-content="start">
					<mu-flex class="flex" justify-content="center">
						<p style="margin: 0px;font-size: 17px; font-weight: 400;margin-top: 13px;">{{Name}}</p>
					</mu-flex>
				</mu-flex>
				<mu-flex class="flex" justify-content="start">
					<mu-flex class="flex" justify-content="center">
						<p style="margin: 0px;font-size: 13px;color:#C4C400;">代码:{{Code}}</p>
					</mu-flex>
				</mu-flex>
				<mu-flex class="flex" justify-content="start">
					<mu-flex class="flex" justify-content="start" fill>
						<p style="margin: 0px;font-size: 13px;color: #BDBDBD;">{{Nature}}</p>
					</mu-flex>
					<mu-flex class="flex" justify-content="start" fill>
						<p style="margin: 0px;font-size: 13px;color: #BDBDBD;">{{Category}}</p>
					</mu-flex>
					<mu-flex class="flex" justify-content="start" fill>
						<p style="margin: 0px;font-size: 13px;color:#BDBDBD;">{{City}}</p>
					</mu-flex>
				</mu-flex>
			</mu-container>
		</div>
		<div style="margin-top:10px;border-top: 1px solid #ffcdd2;">
			<mu-container>
				<mu-tabs :value.sync="active1" inverse color="secondary" text-color="rgba(0, 0, 0, .80)" center full-width style="z-index: 1;">
					<mu-tab style="font-size: 4.0vw;">专业列表</mu-tab>
					<mu-tab style="font-size: 4.0vw;">最低录取分数</mu-tab>
					<mu-tab style="font-size: 4.0vw;">院校简介</mu-tab>
				</mu-tabs>
				<div class="demo-text" v-if="active1 === 2">
					<mu-flex class="flex" justify-content="start" fill>
						<p style="font-size: 15px;border-left:3px solid deepskyblue;padding-left: 10px;">学校简介</p>
					</mu-flex>
					<p>“……是的，我承认从很早以前我都害怕死亡，在医院里被人研究的时候，以前做出布局的时候，其实我很怕死的，因为除了死以外，我没有值得珍惜的东西，很奇怪是吧？恰好是这样我真的很怕死，因为我想要有值得珍惜的东西之后，死亡之后才会不寂寞，我才能够安然的面对死亡……”</p>
				</div>
				<div class="demo-text-table" v-if="active1 === 1">
					<mu-flex class="flex" justify-content="start" fill>
						<p style="font-size: 15px;border-left:3px solid deepskyblue;padding-left: 10px;">历年分数</p>
					</mu-flex>
					<mu-container>
						<mu-row gutter>
							<mu-col span="12" lg="4" sm="6">
								<mu-select label="年份" v-model="year.value" full-width @change="getLowscore()">
									<mu-option v-for="option,index in options" :key="option" :label="option" :value="option"></mu-option>
								</mu-select>
							</mu-col>
						</mu-row>
					</mu-container>
					<mu-container>
						<mu-paper :z-depth="1">
							<mu-data-table stripe :columns="columns" :sort.sync="sort" @sort-change="handleSortChange" :data="list.slice(0, 6)">
								<template slot-scope="scope">
									<td class="is-center">{{scope.row.专业类型}}</td>
									<td class="is-center">{{scope.row.录取分数}}</td>
								</template>
							</mu-data-table>
						</mu-paper>
					</mu-container>
				</div>
				<div class="demo-text-table" v-if="active1 === 0">

					<mu-flex class="flex" justify-content="start" fill>
						<p style="font-size: 15px;border-left:3px solid deepskyblue;padding-left: 10px;">专业列表</p>
					</mu-flex>
					<mu-flex class="flex-wrapper" justify-content="center" align-items="center" fill>
						<mu-ripple v-bind:style="{'opacity':professionType == '普通' ? '1':'0.5'}" class="mu-ripple-demo demo-1" @click="getProfression('普通')">普通专业</mu-ripple>
						<mu-ripple v-bind:style="{'opacity':professionType == '校企合作' ? '1':'0.5'}" class="mu-ripple-demo demo-1" @click="getProfression('校企合作')">校企合作专业</mu-ripple>
						<mu-ripple v-bind:style="{'opacity':professionType == '中外合作' ? '1':'0.5'}" class="mu-ripple-demo demo-1" @click="getProfression('中外合作')">中外合作专业</mu-ripple>
					</mu-flex>
					<mu-flex class="flex-wrapper" justify-content="center" align-items="center" fill style="border-bottom: 1px solid rgb(0, 0, 0, 0.1);">
						<mu-ripple v-bind:style="{'opacity':professionType == '3+2连读' ? '1':'0.5'}" class="mu-ripple-demo demo-1" @click="getProfression('3+2连读')">3+2连读专业</mu-ripple>
						<mu-ripple v-bind:style="{'opacity':professionType == '春考' ? '1':'0.5'}" class="mu-ripple-demo demo-1" @click="getProfression('春考')">春考专业</mu-ripple>
						<mu-ripple v-bind:style="{'opacity':professionType == '艺术' ? '1':'0.5'}" class="mu-ripple-demo demo-1" @click="getProfression('艺术')">艺术专业</mu-ripple>
					</mu-flex>
					<mu-flex class="flex" justify-content="start" fill style="border-bottom: 1px solid rgb(0, 0, 0, 0.1);">
						<p style="font-size: 12px;padding-left: 10px;padding-top: 5px;">2018年战胜计划</p>
						<p style="font-size: 12px;padding-left: 10px;padding-top: 5px;">{{professionType}}</p>
						<mu-select @change="getProfression('普通')" v-model="normal.value1" style="width: 18%;font-size: 10px;position: absolute;right:26%;margin-bottom: 0px;padding-bottom: 0px;padding-top: 5px;">
							<mu-option v-for="benzhuanSelete,index in benzhuanSelete" :key="benzhuanSelete" :label="benzhuanSelete" :value="benzhuanSelete"></mu-option>
						</mu-select>
						<mu-select @change="getProfression('普通')" v-model="normal.value2" style="width: 18%;font-size: 10px;position: absolute;right:5%;margin-bottom: 0px;padding-bottom: 0px;padding-top: 5px;">
							<mu-option v-for="wenliSelete,index in wenliSelete" :key="wenliSelete" :label="wenliSelete" :value="wenliSelete"></mu-option>
						</mu-select>
					</mu-flex>
					<mu-container style="margin-top: 10px;">
						<mu-paper :z-depth=" 1 ">
							<mu-data-table stripe :columns="profressionColumns " :data="profressionList ">
								<template slot-scope="scope ">
									<td class="is-center ">{{scope.row.专业代码}}</td>
									<td>{{scope.row.专业名称}}</td>
								</template>
							</mu-data-table>
						</mu-paper>
					</mu-container>
				</div>
			</mu-container>
		</div>
	</div>
</template>

<script>
	export default {
		mounted() {
			this.SchoolImg = this.$route.params.schoolImg
			this.Name = this.$route.params.name
			this.Nature = this.$route.params.nature
			this.City = this.$route.params.city
			this.Level = this.$route.params.level
			this.Wenlike = this.$route.params.wenlike
			this.Category = this.$route.params.category
			this.LearnType = this.$route.params.learnType
			this.Code = this.$route.params.code
			this.getLowscore()
			this.getProfression('普通')
		},
		data() {
			return {
				benzhuanSelete: [
					'本科', '专科'
				],
				wenliSelete: [
					'文科', '理科'
				],
				normal: {
					value1: '本科',
					value2: '文科',
				},
				professionType: '',
				ProfressionName: null,
				ProfressionCode: null,
				SchoolImg: null,
				Name: null,
				Code: null,
				Nature: null,
				City: null,
				Level: null,
				Wenlike: null,
				Category: null,
				LearnType: null,
				options: [
					'2016', '2017', '2018',
				],
				year: {
					value: '2016',
				},

				active1: 0,
				sort: {
					name: '',
					order: 'asc'
				},
				columns: [{
						title: '专业类型',
						name: '专业类型',
						width: "40% ",
						align: 'center',
					},
					{
						title: '录取分数',
						width: 700,
						name: '录取分数',
						align: 'center',
						sortable: true
					},
				],
				list: [{
						专业类型: '普通专业',
						录取分数: '',
					},
					{
						专业类型: '3+2连续',
						录取分数: '',
					},
					{
						专业类型: '校企合作',
						录取分数: '',
					},
					{
						专业类型: '中外合作',
						录取分数: '',
					},
					{
						专业类型: '艺术',
						录取分数: '',
					},
					{
						专业类型: '春考',
						录取分数: '',
					},
				],
				profressionColumns: [{
						title: '专业代码',
						name: '专业代码',
						width: "40% ",
						align: 'center',
					},
					{
						title: '专业名称',
						width: 700,
						name: '专业名称'
					},
				],
				profressionList: [],
			};
		},
		methods: {
			backHome() {
				this.$router.push('/vip_selectPage')
			},
			handleSortChange({
				name,
				order
			}) {
				this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
			},
			getLowscore() {
				let that = this
				var search = {
					name: this.Name,
					code: this.Code,
					level: this.Level,
					wenlike: this.Wenlike,
					year: this.year.value
				}
				that.axios.post('gaokao-api/api/vip/getLowscore', search).then(
					function(response) {
						console.log(response)
						if(search.level == '本科') {
							if(search.wenlike == '文科') {
								that.list[0].录取分数 = response.data.lowscore.putongwenke;
								that.list[1].录取分数 = response.data.lowscore.lianduwenke;
								that.list[2].录取分数 = response.data.lowscore.xiaoqihezuowenke;
								that.list[3].录取分数 = response.data.lowscore.zhongwaihezuowenke;
								that.list[4].录取分数 = response.data.lowscore.yishuwenke;
								that.list[5].录取分数 = response.data.lowscore.chunkaowenke;
							}
							if(search.wenlike == '理科') {
								that.list[0].录取分数 = response.data.lowscore[0].putonglike;
								that.list[1].录取分数 = response.data.lowscore[0].liandulike;
								that.list[2].录取分数 = response.data.lowscore[0].xiaoqihezuolike;
								that.list[3].录取分数 = response.data.lowscore[0].zhongwaihezuolike;
								that.list[4].录取分数 = response.data.lowscore[0].yishulike;
								that.list[5].录取分数 = response.data.lowscore[0].chunkaolike;
							}
						}
						if(search.level == '专科') {
							if(search.wenlike == '文科') {
								that.list[0].录取分数 = response.data.lowscore.zhuankeputongwenke;
								that.list[1].录取分数 = response.data.lowscore.zhuankelianduwenke;
								that.list[2].录取分数 = response.data.lowscore.zhuankexiaoqiwenke;
								that.list[3].录取分数 = response.data.lowscore.zhuankezhongwaihezuowenke;
								that.list[4].录取分数 = response.data.lowscore.zhuankeyishuwenke;
								that.list[5].录取分数 = response.data.lowscore.zhuankechunkaowenke;
							}
							if(search.wenlike == '理科') {
								that.list[0].录取分数 = response.data.lowscore.zhuankeputonglike;
								that.list[1].录取分数 = response.data.lowscore.zhuankeliandulike;
								that.list[2].录取分数 = response.data.lowscore.zhuankexiaoqilike;
								that.list[3].录取分数 = response.data.lowscore.zhuankezhongwaihezuolike;
								that.list[4].录取分数 = response.data.lowscore.zhuankeyishulike;
								that.list[5].录取分数 = response.data.lowscore.zhuankechunkaolike;
							}
						}
					}).catch(
					function(error) {
						console.log(error)
					})
			},
			getProfression(professionType) {
				this.profressionList = []
				this.professionType = professionType
				let that = this
				var search = {
					name: this.Name,
					code: this.Code,
					level: this.normal.value1,
					wenlike: this.normal.value2,
					professionType: professionType,
				}
				that.axios.post('gaokao-api/api/vip/getProfression', search).then(
					function(response) {
						console.log(response)
						for(let i = 0; i < response.data.profression.length; i++) {
							let Oneprofression = {
								专业代码: response.data.profression[i].code,
								专业名称: response.data.profression[i].name,
							};
							that.profressionList.splice(i, 1, Oneprofression)
						}
					}).catch(
					function(error) {
						console.log(error)
					})
			},
		}
	}
</script>

<style scoped="scoped">
	.mu-ripple-demo {
		position: relative;
		width: 28%;
		height: 26px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		border: 1px solid #CB6C74;
		border-radius: 4px;
		font-size: 10px;
		color: #CB6C74;
		margin-left: 10px;
		&.demo-1 {
			color: #2196f3;
			border: 1px solid #2196f3;
		}
	}
	
	.flex-wrapper {
		width: 100%;
		height: 50px;
	}
	
	.flex-wrapper:first-child {
		margin-top: 0;
	}
	
	.flex-demo:first-child {
		margin-left: 0;
	}
	
	.demo-text {
		padding: 16px;
		background: #fff;
		p {
			margin: 8px 0;
		}
	}
	
	.demo-text-table {
		padding-top: 16px;
		background: #fff;
		p {
			margin: 8px 0;
		}
	}
</style>